<template>
  <div class="room-detail-page">
    <!-- 顶部全景图区域 -->
    <div class="panorama-section">
      <div class="floating-elements">
        <div class="floating-icon book"><i class="el-icon-reading"></i></div>
        <div class="floating-icon coffee"><i class="el-icon-coffee-cup"></i></div>
        <div class="floating-icon wifi"><i class="el-icon-connection"></i></div>
        <div class="floating-icon light"><i class="el-icon-light-rain"></i></div>
      </div>
      
      <div class="room-info-floating">
        <div class="real-time-status">
          <div class="status-item">
            <i class="el-icon-timer"></i>
            <span>当前时段：{{ getCurrentTimeSlot() }}</span>
          </div>
          <div class="status-item">
            <i class="el-icon-data-analysis"></i>
            <span>
              使用率：
              <span :style="{ color: getOccupancyColor() }">
                {{ getOccupancyRate() }}%
              </span>
            </span>
          </div>
          <div class="status-item business-time">
            <i class="el-icon-alarm-clock"></i>
            <div class="time-info">
              <span class="label">营业时间</span>
              <div class="time-range">
                <span class="time">{{ bookingRule.startTime ? bookingRule.startTime.slice(0,5) : '' }}</span>
                <span class="separator">-</span>
                <span class="time">{{ bookingRule.endTime ? bookingRule.endTime.slice(0,5) : '' }}</span>
              </div>
            </div>
          </div>
        </div>

        <div class="room-status-badge" :class="getStatusClass(roomInfo.status)">
          {{ getStatusText(roomInfo.status) }}
        </div>
        
        <h1>{{ roomInfo.roomName }}</h1>
        <p class="room-slogan">{{ getRoomSlogan() }}</p>
        
        <div class="quick-stats">
          <div class="stat-item">
            <div class="stat-icon">
              <i class="el-icon-user"></i>
              <div class="pulse-ring"></div>
            </div>
            <div class="stat-info">
              <span class="stat-value">{{ availableSeatsCount }}/{{ totalSeatsCount }}</span>
              <small>可用座位</small>
            </div>
          </div>
          
          <div class="stat-divider"></div>
          
          <div class="stat-item">
            <div class="stat-icon">
              <i class="el-icon-location"></i>
              <div class="pulse-ring"></div>
            </div>
            <div class="stat-info">
              <span class="stat-value">{{ roomInfo.location }}</span>
              <small>位置信息</small>
            </div>
          </div>
        </div>

        <div class="quick-actions">
          <button class="action-btn" @click="handleVirtualTour">
            <i class="el-icon-video-camera"></i>
            虚拟导览
          </button>
          <button class="action-btn" @click="showEnvironmentInfo">
            <i class="el-icon-picture"></i>
            环境照片
          </button>
          <button class="action-btn" @click="showReviews">
            <i class="el-icon-chat-dot-round"></i>
            用户评价
          </button>
        </div>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="main-content">
      <!-- 左侧：座位预约区 -->
      <div class="left-section">
        <!-- 座位布局图 -->
        <div class="seat-map-container">
          <div class="section-title">
            <h2>座位布局</h2>
            <div class="seat-legend">
              <span class="legend-item">
                <i class="seat-dot available"></i>可选
              </span>
              <span class="legend-item">
                <i class="seat-dot occupied"></i>已占用
              </span>
              <span class="legend-item">
                <i class="seat-dot maintenance"></i>维护中
              </span>
              <span class="legend-item">
                <i class="seat-dot selected"></i>已选择
              </span>
            </div>
          </div>
          
          <div class="seat-map">
            <div v-for="area in seatAreas" :key="area.code" class="area-section">
              <div class="area-title">
                <span class="area-name">{{ area.name }}</span>
                <span class="area-count">{{ getAvailableSeatCount(area) }}个可用</span>
              </div>
              <div class="seat-grid">
                <div 
                  v-for="seat in area.seats" 
                  :key="seat.id"
                  class="seat-item"
                  :class="getSeatClass(seat)"
                  @click="handleSeatClick(seat)"
                >
                  <el-tooltip 
                    :content="getSeatTooltip(seat)" 
                    placement="top"
                  >
                    <div class="seat-content">
                      <span class="seat-number">{{ seat.seatNumber }}</span>
                      <div class="seat-icons">
                        <i v-if="seat.hasPowerOutlet" class="el-icon-lightning"></i>
                        <i v-if="seat.isCorner" class="el-icon-position"></i>
                      </div>
                    </div>
                  </el-tooltip>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 预约时段选择 -->
        <div class="booking-time-section" v-if="selectedSeat">
          <div class="section-title">
            <h2>选择时段</h2>
            <el-tabs v-model="activeDate" @tab-click="handleDateTabClick">
              <el-tab-pane 
                v-for="date in availableDates" 
                :key="date"
                :label="formatDateLabel(date)"
                :name="date"
              >
                <div class="time-slots">
                  <div 
                    v-for="slot in getFilteredTimeSlots()"
                    :key="slot.originalTime"
                    class="time-slot-item"
                    :class="{
                      'available': slot.available,
                      'selected': selectedTimeSlots.some(s => s.originalTime === slot.originalTime)
                    }"
                    @click="handleTimeSlotClick(slot)"
                  >
                    <span class="time">{{ slot.time }}</span>
                    <span class="status">{{ slot.available ? '可预约' : '已约满' }}</span>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>

        <!-- 预约按钮 -->
        <div class="booking-action" v-if="selectedSeat && selectedTimeSlots.length">
          <el-button 
            type="primary" 
            size="large" 
            class="submit-btn" 
            @click="handleBooking"
          >
            确认预约
          </el-button>
        </div>
      </div>

      <!-- 右侧：信息展示区 -->
      <div class="right-section">
        <!-- 预约信息确认卡片 -->
        <div class="booking-card" v-if="selectedSeat && selectedTimeSlots.length">
          <div class="card-header">
            <h3>预约信息</h3>
          </div>
          <div class="booking-details" v-if="getSelectedSeatInfo()">
            <div class="detail-item">
              <span class="label">座位号</span>
              <span class="value">{{ getSelectedSeatInfo().seatNumber }}</span>
            </div>
            <div class="detail-item">
              <span class="label">位置</span>
              <span class="value">{{ getSelectedSeatInfo().position }}</span>
            </div>
            <div class="detail-item">
              <span class="label">日期</span>
              <span class="value">{{ activeDate }}</span>
            </div>
            <div class="detail-item">
              <span class="label">时段</span>
              <span class="value">{{ formatSelectedTimeSlots() }}</span>
            </div>
            <div class="detail-item total">
              <span class="label">费用</span>
              <span class="value price">￥{{ calculatePrice() }}</span>
            </div>
          </div>
          <div class="booking-actions">
            <el-button 
              type="primary" 
              class="submit-btn" 
              @click.native="handleBooking"
              :loading="loading"
            >
              确认预约
            </el-button>
            <el-button 
              plain 
              class="reset-btn" 
              @click="resetSelection"
            >
              重新选择
            </el-button>
          </div>
        </div>

        <!-- 自习室详情卡片 -->
        <div class="info-card">
          <div class="card-header">
            <h3>自习室详情</h3>
          </div>
          <div class="room-features">
            <div class="feature-grid">
              <div v-for="(item, index) in equipmentList" :key="index" class="feature-item">
                <i :class="item.icon"></i>
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
          <div class="room-description">
            <p>{{ roomInfo.description }}</p>
          </div>
        </div>

        <!-- 使用须知卡片 -->
        <div class="notice-card">
          <div class="card-header">
            <h3>使用须知</h3>
          </div>
          <div class="rules-container">
            <div class="rule-section">
              <div class="rule-title">
                <i class="el-icon-document"></i>
                <span>预约规则</span>
              </div>
              <div class="rule-list">
                <div class="rule-item">
                  <i class="el-icon-time"></i>
                  <span>每次最少预约{{ bookingRule.maxHoursPerBooking }}小时</span>
                </div>
                <div class="rule-item">
                  <i class="el-icon-date"></i>
                  <span>可提前{{ bookingRule.maxDaysAhead }}天预约，每月最多{{ bookingRule.maxBookingsPerMonth }}次</span>
                </div>
              </div>
            </div>
            
            <div class="rule-section">
              <div class="rule-title">
                <i class="el-icon-warning"></i>
                <span>取消规则</span>
              </div>
              <div class="rule-list">
                <div class="rule-item">
                  <i class="el-icon-circle-close"></i>
                  <span>开始时间前2小时可免费取消</span>
                </div>
                <div class="rule-item">
                  <i class="el-icon-warning-outline"></i>
                  <span>开始时间前2小时内取消将扣除信用分</span>
                </div>
                <div class="rule-item">
                  <i class="el-icon-timer"></i>
                  <span>超时未到签到自动释放座位</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 在 template 中添加弹窗组件 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="400px"
      custom-class="booking-dialog"
      :show-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="true"
      :append-to-body="true"
      center
    >
      <div class="dialog-content" v-if="selectedSeatInfo">
        <div class="dialog-header">
          <i class="el-icon-success"></i>
          <h3>确认预约</h3>
        </div>
        
        <div class="dialog-body">
          <div class="booking-info">
            <div class="info-row">
              <span class="label">座位号</span>
              <span class="value">{{ selectedSeatInfo.seatNumber }}</span>
            </div>
            <div class="info-row">
              <span class="label">位置</span>
              <span class="value">{{ selectedSeatInfo.position }}</span>
            </div>
            <div class="info-row">
              <span class="label">日期</span>
              <span class="value">{{ activeDate }}</span>
            </div>
            <div class="info-row">
              <span class="label">时段</span>
              <span class="value time">{{ formatSelectedTimeSlots() }}</span>
            </div>
            <div class="info-row total">
              <span class="label">费用</span>
              <span class="value price">￥{{ calculatePrice() }}</span>
            </div>
          </div>
          
          <div class="notice">
            <i class="el-icon-info"></i>
            <span>请确认预约信息无误</span>
          </div>
        </div>
        
        <div class="dialog-footer">
          <el-button 
            type="primary" 
            class="confirm-btn" 
            @click="handleConfirmBooking"
            :loading="loading"
          >
            确认预约
          </el-button>
          <el-button 
            class="cancel-btn" 
            @click="dialogVisible = false"
          >
            取消
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'RoomDetail',
  data() {
    return {
      loading: false,
      roomId: null,
      roomInfo: {
        roomName: '',
        status: 0,
        location: '',
        description: ''
      },
      equipmentList: [
        { name: '空调', icon: 'el-icon-cold-drink' },
        { name: '新风系统', icon: 'el-icon-wind-power' },
        { name: '饮水机', icon: 'el-icon-coffee-cup' },
        { name: 'WiFi', icon: 'el-icon-connection' },
        { name: '充电插座', icon: 'el-icon-lightning' },
        { name: '书架', icon: 'el-icon-reading' }
      ],
      selectedDate: new Date(),
      selectedSeat: null,
      selectedTimeSlots: [],
      activeRules: ['1'],
      timeSlots: [],
      seatAreas: [],
      seatTypeMap: {
        1: '普通座位',
        2: '电脑座位',
        3: '大桌座'
      },
      totalSeatsCount: 0,
      availableSeatsCount: 0,
      activeDate: '',
      availableDates: [],
      bookingRule: {
        maxDaysAhead: 7,
        maxHoursPerBooking: 2,
        maxBookingsPerMonth: 30,
        startTime: '08:00:00',
        endTime: '22:00:00'
      },
      dialogVisible: false
    }
  },
  created() {
    this.roomId = this.$route.params.id
    this.init()
  },
  computed: {
    selectedSeatInfo() {
      if (!this.selectedSeat || !this.seatAreas || !this.seatAreas.length) {
        return null
      }
      const seat = this.seatAreas
        .flatMap(area => area.seats)
        .find(s => s.id === this.selectedSeat)
      
      if (!seat) return null
      
      return {
        seatNumber: seat.seatNumber,
        position: seat.position
      }
    },
    dateOptions() {
      return {
        disabledDate(time) {
          const today = new Date()
          const maxDate = new Date()
          maxDate.setDate(today.getDate() + this.bookingRule.maxDaysAhead)
          return time.getTime() < Date.now() - 8.64e7 || time.getTime() > maxDate.getTime()
        }
      }
    }
  },
  methods: {
    async init() {
      try {
        await Promise.all([
          this.getRoomDetail(),
          this.getSeatList(),
          this.getBookingRule()
        ])
      } catch (error) {
        console.error('初始化失败:', error)
        this.$message.error('加载数据失败，请刷新重试')
      }
    },
    // 获取自习室详情
    async getRoomDetail() {
      if (!this.roomId) return
      this.loading = true
      try {
        const res = await request({
          url: `/api/study/studyroom/${this.roomId}`,
          method: 'get'
        })
        if (res.code === 200) {
          this.roomInfo = {
            roomName: res.data.roomName,
            status: res.data.status,
            location: res.data.location,
            description: res.data.description,
            equipment: res.data.equipment ? res.data.equipment.split(',') : []
          }
          
          // 更新设备列表
          if (this.roomInfo.equipment.length > 0) {
            this.equipmentList = this.roomInfo.equipment.map(item => {
              const iconMap = {
                '空调': 'el-icon-cold-drink',
                '电源插座': 'el-icon-lightning',
                'WIFI': 'el-icon-connection',
                // 可以继续添加其他设备的图标映射
              }
              return {
                name: item,
                icon: iconMap[item] || 'el-icon-setting'
              }
            })
          }
        }
      } catch (error) {
        console.error('获取自习室详情失败:', error)
        this.$message.error('获取自习室详情失败')
      }
      this.loading = false
    },
    // 获取座位列表
    async getSeatList() {
      try {
        const res = await request({
          url: `/api/study/studyroom/seatList/${this.roomId}`,
          method: 'get'
        })
        console.log('座位数据响应:', res)
        if (res.code === 0) {
          // 按区域分组处理座位数据
          const groupedSeats = {}
          res.data.forEach(seat => {
            if (!groupedSeats[seat.areaCode]) {
              groupedSeats[seat.areaCode] = {
                code: seat.areaCode,
                name: seat.areaCode,
                seats: []
              }
            }
            groupedSeats[seat.areaCode].seats.push(seat)
          })
          console.log('处理后座位数据:', groupedSeats)
          this.seatAreas = Object.values(groupedSeats)
          
          // 计算总座位数和可用座位数
          this.totalSeatsCount = res.data.length
          this.availableSeatsCount = res.data.filter(seat => !seat.isOccupied).length
          console.log('座位统计:', {
            total: this.totalSeatsCount,
            available: this.availableSeatsCount
          })
        }
      } catch (error) {
        console.error('获取座位信息失败:', error)
        this.$message.error('获取座位信息失败')
      }
    },
    // 获取座位状态样式类
    getSeatClass(seat) {
      if (seat.isOccupied) return 'occupied'
      if (this.selectedSeat === seat.id) return 'selected'
      return 'available'
    },
    // 获取座位提示信息
    getSeatTooltip(seat) {
      const status = seat.isOccupied ? '已占用' : '可预约'
      const type = this.seatTypeMap[seat.seatType]
      const features = []
      if (seat.hasPowerOutlet) features.push('有电源')
      if (seat.isCorner) features.push('角落位')
      
      return `
        ${seat.seatNumber} - ${seat.position}
        型：${type}
        舒适度：${seat.comfortLevel}星
        ${features.join('，')}
        状态：${status}
      `
    },
    // 获取区域可用座位数
    getAvailableSeatCount(area) {
      return area.seats.filter(seat => !seat.isOccupied).length
    },
    // 处理座位点击
    async handleSeatClick(seat) {
      if (seat.isOccupied) {
        this.$message.warning('该座位已被占用')
        return
      }
      
      this.selectedSeat = seat.id
      this.selectedTimeSlots = [] // 清空已选时间段
      
      // 获取可预约时间段
      await this.fetchAvailableTimeSlots(seat.id)
    },
    // 获取可预约时间段
    async fetchAvailableTimeSlots(seatId) {
      try {
        const res = await request({
          url: '/api/study/studyroom/seatInfo',
          method: 'get',
          params: {
            roomId: this.roomId,
            seatId: seatId
          }
        })
        
        if (res.code === 0) {
          const timeSlots = res.data.map(slot => {
            const startTime = new Date(slot.timeSlot)
            const endTime = new Date(slot.endTime)
            
            return {
              time: `${startTime.getUTCHours().toString().padStart(2, '0')}:00-${endTime.getUTCHours().toString().padStart(2, '0')}:00`,
              date: `${startTime.getUTCFullYear()}-${(startTime.getUTCMonth() + 1).toString().padStart(2, '0')}-${startTime.getUTCDate().toString().padStart(2, '0')}`,
              originalTime: slot.timeSlot,
              available: !slot.isReserved,
              hour: startTime.getUTCHours(),
              timestamp: startTime.getTime()
            }
          })

          // 按日期分组并排序
          const dates = [...new Set(timeSlots.map(slot => slot.date))].sort()
          this.availableDates = dates
          
          // 如果没有选中日期或当前选中日期不在可用日期中，设置为第一个可用日期
          if (!this.activeDate || !dates.includes(this.activeDate)) {
            this.activeDate = dates[0] || ''
          }

          this.timeSlots = timeSlots
          
          console.log('时间段数据:', {
            availableDates: this.availableDates,
            activeDate: this.activeDate,
            timeSlots: this.timeSlots
          })
        }
      } catch (error) {
        console.error('获取可预约时间失败:', error)
        this.$message.error('获取可预约时间失败')
      }
    },
    // 格式化时间段显示
    formatTimeSlot(timeStr) {
      const date = new Date(timeStr)
      const localHours = (date.getHours() + 8) % 24 // UTC+8
      const nextSlot = new Date(date.getTime() + (this.bookingRule.maxHoursPerBooking * 60 * 60 * 1000))
      const nextHours = (nextSlot.getHours() + 8) % 24
      return `${localHours.toString().padStart(2, '0')}:00-${nextHours.toString().padStart(2, '0')}:00`
    },
    // 格式化日期显示
    formatDate(date) {
      return new Date(date).toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      })
    },
    // 处理时间段点击
    handleTimeSlotClick(slot) {
      if (!slot.available) return
      
      const index = this.selectedTimeSlots.findIndex(
        selected => selected.originalTime === slot.originalTime
      )
      
      if (index > -1) {
        this.selectedTimeSlots.splice(index, 1)
      } else {
        // 检查是否连续
        if (this.selectedTimeSlots.length > 0) {
          const lastSlot = new Date(this.selectedTimeSlots[this.selectedTimeSlots.length - 1].originalTime)
          const currentSlot = new Date(slot.originalTime)
          const timeDiff = (currentSlot - lastSlot) / (1000 * 60 * 60)
          
          if (timeDiff !== this.bookingRule.maxHoursPerBooking) {
            this.$message.warning('请选择连续的时间段')
            return
          }
        }

        // 检查是否超过最大预约时长
        if (this.selectedTimeSlots.length >= 8 / this.bookingRule.maxHoursPerBooking) {
          this.$message.warning('已达到最大预约时长')
          return
        }

        this.selectedTimeSlots.push(slot)
      }
    },
    // 修改模板部分的时间段显示
    getFilteredTimeSlots() {
      if (!this.activeDate) return []
      return this.timeSlots
        .filter(slot => slot.date === this.activeDate)
        .sort((a, b) => a.timestamp - b.timestamp)
    },
    // 修改获取选中座位信息的方法
    getSelectedSeatInfo() {
      if (!this.selectedSeat || !this.seatAreas || !this.seatAreas.length) {
        return null
      }
      const seat = this.seatAreas
        .flatMap(area => area.seats)
        .find(s => s.id === this.selectedSeat)
      
      if (!seat) return null
      
      return {
        seatNumber: seat.seatNumber,
        position: seat.position
      }
    },
    getStatusType(status) {
      const typeMap = {
        0: 'danger',    // 关闭 - 红色
        1: 'success',   // 开放 - 绿色
        2: 'warning'    // 维护中 - 橙色
      }
      return typeMap[status] || 'info'
    },
    getStatusText(status) {
      const statusMap = {
        0: '暂停使用',
        1: '营业中',  // 1表示正常运行
        2: '维护中'
      }
      return statusMap[status] || '未知状态'
    },
    getStatusClass(status) {
      const classMap = {
        0: 'closed',    // 关闭
        1: 'open',      // 开放
        2: 'maintain'   // 维护中
      }
      return classMap[status] || 'closed'
    },
    handleDateChange() {
      // 清空已选择的时间段
      this.selectedTimeSlots = []
      // 重新获取该座位的可用时间段
      if (this.selectedSeat) {
        this.fetchAvailableTimeSlots(this.selectedSeat)
      }
    },
    formatTimeSlots(slots) {
      return slots.join(', ')
    },
    calculatePrice() {
      return this.selectedTimeSlots.length * (10 * this.bookingRule.maxHoursPerBooking)
    },
    handleBooking() {
      console.log('点击确认预约按钮')
      
      if (!this.canBook()) {
        this.$message.warning('自习室当前不可预约')
        return
      }
      
      if (!this.selectedSeat || !this.selectedTimeSlots.length) {
        this.$message.warning('请选择座位和时间段')
        return
      }

      // 将预约数据存储到localStorage
      const bookingData = {
        roomId: this.roomId,
        roomName: this.roomInfo.roomName,
        seatId: this.selectedSeat,
        seatInfo: this.getSelectedSeatInfo(),
        timeSlots: this.selectedTimeSlots,
        date: this.activeDate,
        price: this.calculatePrice()
      }
      localStorage.setItem('bookingData', JSON.stringify(bookingData))
      
      // 跳转到订单页面
      this.$router.push('/study-room/order')
    },
    async handleConfirmBooking() {
      if (this.loading) return
      
      try {
        this.loading = true
        const bookingData = {
          roomId: this.roomId,
          seatId: this.selectedSeat,
          timeSlots: this.selectedTimeSlots.map(slot => ({
            startTime: slot.originalTime,
            endTime: new Date(new Date(slot.originalTime).getTime() + (this.bookingRule.maxHoursPerBooking * 60 * 60 * 1000)).toISOString()
          }))
        }
        
        console.log('预约数据:', bookingData)
        
        const res = await request({
          url: '/api/study/studyroom/booking',
          method: 'post',
          data: bookingData
        })

        if (res.code === 0) {
          this.$message.success('预约成功')
          this.dialogVisible = false
          // 重置选择状态
          this.resetSelection()
          // 刷新座位列表
          await this.getSeatList()
          // 跳转到预约列表页
          this.$router.push('/study-room/booking')
        } else {
          this.$message.error(res.message || '预约失败')
        }
      } catch (error) {
        console.error('预约失败:', error)
        this.$message.error('预约失败，请重试')
      } finally {
        this.loading = false
      }
    },
    // 重置选择状态的方法
    resetSelection() {
      this.selectedSeat = null
      this.selectedTimeSlots = []
      this.timeSlots = []
      this.dialogVisible = false
    },
    showCustomToast(message, type = 'info') {
      const toast = document.createElement('div')
      toast.className = `custom-toast ${type}`
      toast.textContent = message
      document.body.appendChild(toast)
      
      // 画效果
      setTimeout(() => toast.classList.add('show'), 100)
      setTimeout(() => {
        toast.classList.remove('show')
        setTimeout(() => document.body.removeChild(toast), 300)
      }, 2000)
    },
    getCurrentTimeSlot() {
      const now = new Date()
      const hours = now.getHours()
      const minutes = now.getMinutes()
      return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`
    },
    
    getOccupancyRate() {
      if (this.totalSeatsCount === 0) return 0
      const rate = Math.round(((this.totalSeatsCount - this.availableSeatsCount) / this.totalSeatsCount) * 100)
      return Math.min(rate, 100) // 确保不超过100%
    },
    
    getOccupancyColor() {
      const rate = this.getOccupancyRate()
      if (rate < 50) return '#67C23A'
      if (rate < 80) return '#E6A23C'
      return '#F56C6C'
    },
    
    getRoomSlogan() {
      return this.roomInfo.description || '舒适安静的学习环境，欢迎您的使用'
    },
    
    handleVirtualTour() {
      // 实现虚拟导览
    },
    
    showEnvironmentInfo() {
      // 示环片
    },
    
    showReviews() {
      // 显示用户评价
    },

    // 根据自习室状态断是否可预约
    canBook() {
      return this.roomInfo.status === 1 // 1表示正常运行
    },

    // 修改格式化选中时间段的方法
    formatSelectedTimeSlots() {
      if (!this.selectedTimeSlots.length) return ''
      
      return this.selectedTimeSlots
        .sort((a, b) => new Date(a.originalTime) - new Date(b.originalTime))
        .map(slot => {
          const startTime = new Date(slot.originalTime)
          const endTime = new Date(slot.originalTime)
          endTime.setUTCHours(endTime.getUTCHours() + this.bookingRule.maxHoursPerBooking)
          
          return `${startTime.getUTCHours().toString().padStart(2, '0')}:00-${endTime.getUTCHours().toString().padStart(2, '0')}:00`
        })
        .join(', ')
    },

    // 格式化日期标签显示
    formatDateLabel(date) {
      const today = new Date()
      const todayStr = `${today.getFullYear()}-${(today.getMonth() + 1).toString().padStart(2, '0')}-${today.getDate().toString().padStart(2, '0')}`
      
      const tomorrow = new Date(Date.now() + 86400000)
      const tomorrowStr = `${tomorrow.getFullYear()}-${(tomorrow.getMonth() + 1).toString().padStart(2, '0')}-${tomorrow.getDate().toString().padStart(2, '0')}`
      
      if (date === todayStr) return '今天'
      if (date === tomorrowStr) return '明天'
      
      const [, month, day] = date.split('-')
      return `${parseInt(month)}月${parseInt(day)}日`
    },

    // 修改处理日期标签点击的方法
    handleDateTabClick(tab) {
      if (tab && tab.name) {
        this.activeDate = tab.name
        this.selectedTimeSlots = []
      }
    },

    // 获取预约规则
    async getBookingRule() {
      try {
        const res = await request({
          url: `/api/study/studyroom/booking-rule/${this.roomId}`,
          method: 'get'
        })
        if (res.code === 0) {
          this.bookingRule = {
            ...res.data,
            startTime: res.data.startTime,
            endTime: res.data.endTime,
            maxDaysAhead: res.data.maxDaysAhead,
            maxHoursPerBooking: res.data.maxHoursPerBooking,
            maxBookingsPerMonth: res.data.maxBookingsPerMonth
          }
        }
      } catch (error) {
        console.error('获取预约规则失败:', error)
        this.$message.error('获取预约则失败')
      }
    }
  },
  watch: {
    dialogVisible(val) {
      console.log('弹窗状态:', val)
    }
  }
}
</script>

<style scoped>
.room-detail-page {
  min-height: 100vh;
  background: #f8f9fa;
}

.panorama-section {
  height: 600px;
  background: linear-gradient(120deg, #1a73e8, #34a853);
  position: relative;
  display: flex;
  align-items: flex-end;
  padding-bottom: 100px;
  overflow: hidden;
}

.panorama-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.1) 0%, transparent 20%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.1) 0%, transparent 20%),
    url('data:image/svg+xml,...');
  opacity: 0.5;
}

.room-info-floating {
  position: relative;
  color: white;
  padding: 40px;
  width: 100%;
  z-index: 1;
}

.room-status-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  margin-bottom: 15px;
  font-weight: 500;
  backdrop-filter: blur(10px);
}

.room-status-badge.open {
  background: rgba(103, 194, 58, 0.9);  /* 绿色 - 营业中 */
  box-shadow: 0 2px 8px rgba(103, 194, 58, 0.3);
}

.room-status-badge.closed {
  background: rgba(245, 108, 108, 0.9);  /* 红色 - 暂停使用 */
  box-shadow: 0 2px 8px rgba(245, 108, 108, 0.3);
}

.room-status-badge.maintain {
  background: rgba(230, 162, 60, 0.9);  /* 橙色 - 维护中 */
  box-shadow: 0 2px 8px rgba(230, 162, 60, 0.3);
}

.room-info-floating h1 {
  font-size: 36px;
  margin: 0 0 20px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.quick-stats {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 20px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 15px 25px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.stat-item i {
  font-size: 24px;
  margin-bottom: 8px;
}

.stat-item span {
  font-size: 18px;
  font-weight: 500;
}

.stat-item small {
  font-size: 12px;
  opacity: 0.8;
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.3);
}

.main-content {
  max-width: 1200px;
  margin: -80px auto 40px;
  padding: 0 20px 20px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
  position: relative;
  z-index: 2;
}

.left-section {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  overflow: hidden;
  height: fit-content;
}

.section-title {
  padding: 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title h2 {
  margin: 0;
  font-size: 20px;
  color: #303133;
}

.seat-legend {
  display: flex;
  gap: 15px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #606266;
}

.seat-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.seat-dot.available { background: #67C23A; }
.seat-dot.occupied { background: #F56C6C; }
.seat-dot.maintenance { background: #E6A23C; }
.seat-dot.selected { background: #409EFF; }

.seat-map-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.seat-map {
  padding: 20px;
}

.area-section {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.area-section:last-child {
  margin-bottom: 0;
}

.area-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.area-name {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.area-count {
  font-size: 14px;
  color: #909399;
}

.seat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 10px;
  padding: 20px;
}

.seat-item {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.seat-item.available {
  background: #67C23A;
  color: white;
}

.seat-item.occupied {
  background: #F56C6C;
  color: white;
  cursor: not-allowed;
}

.seat-item.selected {
  background: #409EFF;
  color: white;
  transform: scale(1.1);
}

.seat-content {
  text-align: center;
}

.seat-number {
  font-size: 16px;
  font-weight: 500;
}

.seat-icons {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 12px;
}

.booking-action {
  padding: 20px;
  text-align: center;
}

.submit-btn {
  width: 200px;
  height: 44px;
  font-size: 16px;
}

.time-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  padding: 20px;
}

.time-slot-item {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #DCDFE6;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
}

.time-slot-item.available {
  background: #F0F9EB;
  border-color: #67C23A;
}

.time-slot-item.available:hover {
  background: #67C23A;
  color: white;
}

.time-slot-item.selected {
  background: #409EFF;
  border-color: #409EFF;
  color: white;
}

.time-slot-item:not(.available) {
  background: #F5F7FA;
  cursor: not-allowed;
  opacity: 0.7;
}

.time-slot-item .time {
  font-size: 16px;
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}

.time-slot-item .status {
  font-size: 12px;
  opacity: 0.8;
}

.right-section {
  position: sticky;
  top: 20px;
  height: fit-content;
}

.right-section > div {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin-bottom: 20px;
  overflow: hidden;
}

.card-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.booking-details {
  padding: 20px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.detail-item .label {
  color: #909399;
}

.detail-item .value {
  color: #303133;
  font-weight: 500;
}

.detail-item.total {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px dashed #eee;
}

.value.price {
  color: #F56C6C;
  font-size: 24px;
}

.booking-actions {
  padding: 20px;
  display: flex;
  gap: 10px;
}

.submit-btn {
  flex: 2;
}

.reset-btn {
  flex: 1;
}

.room-features {
  padding: 20px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #606266;
}

.feature-item i {
  font-size: 20px;
  color: #409EFF;
}

.room-description {
  padding: 0 20px 20px;
  color: #606266;
  line-height: 1.6;
}

.notice-card .el-collapse {
  border: none;
}

.rule-content {
  padding: 15px;
  max-height: 300px;
  overflow-y: auto;
}

.rule-content p {
  margin: 10px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #606266;
  line-height: 1.6;
  word-break: break-word;
}

.rule-content i {
  color: #409EFF;
  margin-top: 3px;
  flex-shrink: 0;
}

@media (max-width: 1200px) {
  .panorama-section {
    height: 400px;
    padding-bottom: 80px;
  }

  .main-content {
    grid-template-columns: 1fr;
    margin-top: -60px;
    gap: 20px;
  }
  
  .right-section {
    position: static;
    order: -1;
  }

  .stat-item {
    padding: 10px 20px;
  }
}

@media (max-width: 768px) {
  .panorama-section {
    height: 350px;
    padding-bottom: 60px;
  }

  .main-content {
    padding: 0 10px 20px;
    margin-top: -40px;
  }

  .room-info-floating {
    padding: 20px;
  }

  .room-info-floating h1 {
    font-size: 24px;
    margin-bottom: 15px;
  }

  .quick-stats {
    flex-direction: column;
    gap: 10px;
  }

  .stat-item {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    padding: 12px 20px;
  }

  .stat-item i {
    margin-bottom: 0;
    margin-right: 10px;
  }

  .stat-divider {
    display: none;
  }
}

.custom-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  padding: 12px 24px;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  z-index: 9999;
  opacity: 0;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.custom-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.custom-toast.success {
  background: linear-gradient(45deg, #67C23A, #85CE61);
}

.custom-toast.error {
  background: linear-gradient(45deg, #F56C6C, #FB8989);
}

.custom-toast.info {
  background: linear-gradient(45deg, #409EFF, #69B1FF);
}

.custom-confirm {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(8px);
}

.confirm-content {
  background: white;
  border-radius: 16px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  animation: slideIn 0.3s ease;
  transform: scale(1);
  transition: transform 0.3s ease;
}

.confirm-header {
  padding: 24px;
  text-align: center;
  border-bottom: 1px solid #f0f2f5;
}

.confirm-header i {
  font-size: 48px;
  color: #409EFF;
  margin-bottom: 16px;
  display: block;
}

.confirm-header h3 {
  margin: 0;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}

.confirm-body {
  padding: 24px;
}

.booking-info {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 0 10px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-item .label {
  color: #909399;
  font-size: 15px;
}

.info-item .value {
  color: #303133;
  font-weight: 500;
  font-size: 15px;
}

.info-item.total {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed #dcdfe6;
}

.info-item.total .value.price {
  color: #F56C6C;
  font-size: 24px;
  font-weight: bold;
}

.notice {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #909399;
  font-size: 14px;
}

.notice i {
  color: #E6A23C;
}

.dialog-footer {
  padding: 20px;
  display: flex;
  gap: 12px;
  border-top: 1px solid #f0f2f5;
}

.dialog-footer .el-button {
  flex: 1;
  height: 44px;
  font-size: 16px;
}

.confirm-btn {
  background: linear-gradient(135deg, #409EFF, #66b1ff) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  transition: all 0.3s ease !important;
}

.confirm-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(64, 158, 255, 0.4) !important;
}

.cancel-btn {
  border-color: #dcdfe6 !important;
  color: #606266 !important;
}

.cancel-btn:hover {
  color: #409EFF !important;
  border-color: #409EFF !important;
  background: #ecf5ff !important;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .confirm-content {
    width: 90% !important;
    margin: 0 auto;
  }
  
  .dialog-header {
    padding: 24px 20px;
  }
  
  .dialog-header i {
    font-size: 36px;
    margin-bottom: 12px;
  }
  
  .dialog-header h3 {
    font-size: 20px;
  }
  
  .info-item {
    margin-bottom: 12px;
  }
  
  .info-item .label,
  .info-item .value {
    font-size: 14px;
  }
  
  .info-item.total .value.price {
    font-size: 20px;
  }
  
  .dialog-footer .el-button {
    height: 40px;
    font-size: 15px;
  }
}

.floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.floating-icon {
  position: absolute;
  color: rgba(255, 255, 255, 0.2);
  font-size: 40px;
  animation: float 6s infinite ease-in-out;
}

.floating-icon.book { top: 20%; left: 15%; animation-delay: 0s; }
.floating-icon.coffee { top: 30%; right: 20%; animation-delay: 1s; }
.floating-icon.wifi { bottom: 40%; left: 25%; animation-delay: 2s; }
.floating-icon.light { bottom: 30%; right: 15%; animation-delay: 3s; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

.real-time-status {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.status-item {
  background: rgba(255, 255, 255, 0.1);
  padding: 8px 16px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  backdrop-filter: blur(10px);
}

.room-slogan {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 30px;
  font-weight: 300;
  letter-spacing: 1px;
}

.stat-icon {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.pulse-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: pulse 2s infinite;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

.quick-actions {
  display: flex;
  gap: 15px;
  margin-top: 30px;
}

.action-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  transition: all 0.3s;
  backdrop-filter: blur(10px);
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.action-btn i {
  font-size: 16px;
}

/* 修改原有样式 */
.panorama-section {
  height: 600px; /* 加高度 */
  background: linear-gradient(120deg, #1a73e8, #34a853);
  position: relative;
  display: flex;
  align-items: flex-end;
  padding-bottom: 100px;
  overflow: hidden;
}

.panorama-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.1) 0%, transparent 20%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.1) 0%, transparent 20%),
    url('data:image/svg+xml,...'); /* 添加网格背景 */
  opacity: 0.5;
}

/* 添加响应式样式 */
@media (max-width: 768px) {
  .real-time-status {
    flex-direction: column;
    gap: 10px;
  }
  
  .quick-actions {
    flex-wrap: wrap;
  }
  
  .action-btn {
    flex: 1 1 calc(50% - 10px);
  }
}

.status-item span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 添加使用率数字的过渡效果 */
.status-item span span {
  transition: color 0.3s ease;
  font-weight: 500;
}

/* 当状态非营业中时，添加一些视觉提示 */
.room-status-badge.closed,
.room-status-badge.maintain {
  animation: pulse-warning 2s infinite;
}

@keyframes pulse-warning {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* 当自习室不可预���时，添加蒙层效果 */
.room-detail-page.room-unavailable::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  z-index: 1;
  pointer-events: none;
}

/* 当自习室不可用时，禁用相关操作 */
.room-unavailable .booking-time-section,
.room-unavailable .seat-item {
  opacity: 0.5;
  pointer-events: none;
}

/* 添加提示信息 */
.room-unavailable .booking-time-section::before {
  content: '自习室当前不可预约';
  display: block;
  text-align: center;
  padding: 20px;
  color: #F56C6C;
  font-size: 16px;
}

/* 添加日期选择样式 */
.el-tabs {
  margin-bottom: 20px;
}

.el-tabs__item {
  font-size: 14px;
  padding: 0 20px;
}

.el-tabs__item.is-active {
  color: #409EFF;
  font-weight: 500;
}

/* 时间段网格布局 */
.time-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  padding: 20px;
}

.time-slot-item {
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  cursor: pointer;
  transition: all 0.3s;
}

.time-slot-item.available:hover {
  background: #f0f9eb;
  border-color: #67C23A;
}

.time-slot-item.selected {
  background: #409EFF;
  border-color: #409EFF;
  color: white;
}

/* 添加新的样式 */
.business-hours {
  background: rgba(64, 158, 255, 0.1);
  border-radius: 8px;
  padding: 12px 16px !important;
  margin: 10px 0;
}

.business-hours i {
  font-size: 20px;
  color: #409EFF;
}

.hours-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hours-info .label {
  font-size: 14px;
  color: #606266;
}

.time-range {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.time-range .time {
  background: #409EFF;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: monospace;
}

.time-range .separator {
  color: #909399;
}

/* 修改规则列表样式 */
.rule-list {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
}

.rule-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  color: #606266;
  line-height: 1.6;
}

.rule-item:first-child {
  padding-top: 0;
}

.rule-item:last-child {
  padding-bottom: 0;
}

.rule-item i {
  color: #409EFF;
  font-size: 16px;
  flex-shrink: 0;
}

/* 添加响应式样式 */
@media (max-width: 768px) {
  .business-hours {
    padding: 10px 12px !important;
  }
  
  .time-range {
    font-size: 14px;
  }
  
  .time-range .time {
    padding: 3px 6px;
  }
}

/* 添加新的营业时间样式 */
.status-item.business-time {
  background: rgba(255, 255, 255, 0.15);
  padding: 10px 20px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.business-time .time-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.business-time .label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.business-time .time-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.business-time .time {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 16px;
  font-weight: 500;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.business-time .separator {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 300;
}

.business-time i {
  font-size: 24px;
  color: rgba(255, 255, 255, 0.9);
  margin-right: 8px;
}

/* 添加悬浮效果 */
.status-item.business-time:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

.business-time .time:hover {
  background: rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

/* 修改响应式样式 */
@media (max-width: 768px) {
  .status-item.business-time {
    padding: 8px 16px;
  }
  
  .business-time .time {
    font-size: 14px;
    padding: 2px 6px;
  }
  
  .business-time i {
    font-size: 20px;
  }
}

/* 添加弹窗样式 */
.booking-dialog {
  border-radius: 16px !important;
  overflow: hidden;
}

.booking-dialog .el-dialog__body {
  padding: 0;
}

.dialog-content {
  position: relative;
}

.dialog-header {
  text-align: center;
  padding: 30px 20px;
  background: linear-gradient(135deg, #409EFF, #66b1ff);
  color: white;
}

.dialog-header i {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
  animation: bounceIn 0.6s;
}

.dialog-header h3 {
  font-size: 24px;
  margin: 0;
  font-weight: 500;
}

.dialog-body {
  padding: 24px;
}

.booking-info {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 15px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-item .label {
  color: #909399;
}

.info-item .value {
  color: #303133;
  font-weight: 500;
}

.info-item .value.time {
  color: #409EFF;
}

.info-item.total {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed #dcdfe6;
}

.info-item.total .value.price {
  color: #F56C6C;
  font-size: 24px;
  font-weight: bold;
}

.notice {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #909399;
  font-size: 14px;
}

.notice i {
  color: #E6A23C;
}

.dialog-footer {
  padding: 20px;
  display: flex;
  gap: 12px;
  border-top: 1px solid #f0f2f5;
}

.dialog-footer .el-button {
  flex: 1;
  height: 44px;
  font-size: 16px;
}

.confirm-btn {
  background: linear-gradient(135deg, #409EFF, #66b1ff) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  transition: all 0.3s ease !important;
}

.confirm-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(64, 158, 255, 0.4) !important;
}

.cancel-btn {
  border-color: #dcdfe6 !important;
  color: #606266 !important;
}

.cancel-btn:hover {
  color: #409EFF !important;
  border-color: #409EFF !important;
  background: #ecf5ff !important;
}

@keyframes bounceIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .booking-dialog {
    width: 90% !important;
    margin: 0 auto;
  }
  
  .dialog-header {
    padding: 24px 20px;
  }
  
  .dialog-header i {
    font-size: 36px;
    margin-bottom: 12px;
  }
  
  .dialog-header h3 {
    font-size: 20px;
  }
  
  .info-item {
    font-size: 14px;
  }
  
  .info-item.total .value.price {
    font-size: 20px;
  }
  
  .dialog-footer .el-button {
    height: 40px;
    font-size: 15px;
  }
}
</style> 